<template>
  <div class="userContainer">
    <!-- 顶部查询导航 -->
    <div class="header">
        <el-form :inline="true" @submit.native.prevent>
            <el-form-item label="商店名称">
              <el-input v-model="page.name"></el-input>
            </el-form-item>
            <el-form-item label="店长">
              <!-- 搜索框 -->
              <el-input v-model="page.userName" @change="searchUsers" placeholder="搜索用户"></el-input>
            </el-form-item>
            <el-form-item label="开始日期">
              <el-date-picker v-model="page.createBegin" type="date" value-format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
            <el-form-item label="结束日期">
              <el-date-picker v-model="page.createEnd" type="date" value-format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="getDate">查询</el-button>
              
              <el-button type="primary" @click="reset">清空</el-button>
            </el-form-item>
        </el-form>
    </div>
    <div class="search">
        <button v-for="(item,index) in userList" class="searchText" @click="setUserId(item.id,item.name)" >{{ item.name }}</button>
    </div>
    <br>
    <!-- 数据显示 -->
    <div class="content">
        <el-table
        ref="multipleTable"
        :data="list"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="70">
        </el-table-column>

        <el-table-column
          label="序号"
          width="100">
          <template slot-scope="scope">{{ (scope.$index+1)+(page.currentPage-1)*page.pageItems }}</template>
        </el-table-column>

        <el-table-column
          prop="name"
          label="商店名"
          width="200">
        </el-table-column>

        <el-table-column
          label="商店封面"
          width="300">
          <template slot-scope="scope">
            <img class="avatar" :src="scope.row.cover">
          </template>
        </el-table-column>

        <el-table-column
          prop="description"
          label="商店简介"
          width="100">
        </el-table-column>
        
        
        <el-table-column
          prop="owner"
          label="店主"
          width="100">
        </el-table-column>
        
        <el-table-column
          label="操作"
          show-overflow-tooltip>
          <template slot-scope="scope">
            <!-- 静态路由跳转,携带id  修改课程-->
            <router-link :to="'/shop/info/'+scope.row.id" 
            style="padding-right: 10px;">
              <el-button type="primary" icon="el-icon-edit" circle></el-button>
            </router-link>
             &nbsp;&nbsp; 
            <el-button type="danger" @click="remove(scope.row.id)" icon="el-icon-delete" circle></el-button>
          </template>
        </el-table-column>

      </el-table>
      <el-button style="float:right" type="danger" @click="removes" plain>批量删除</el-button>
    </div>

    <!-- 底部分页导航 -->
    <div class="footer">
        <el-pagination style="magi"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.currentPage"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="page.pageItems"
        layout="total, sizes, prev, pager, next"
        :total="page.total">
        </el-pagination>
    </div>
  </div>
</template>
<script>
import fileStore from '@/api/fileStore';
import shop from '@/api/shop'
import {selectUsersByName} from '@/api/user'
export default {
    data(){
        return {
            list:{},
            page:{
                name:'',
                owner:'',
                userName:'',
                createBegin: null, //创建时间区间
                createEnd: null,
                currentPage: 1,
                pageItems:10, //每页记录条数
                total:0, 
            },
            userList:'',
            multipleSelection: [] //选择记录
        }
    },
    created() {
        //初始化数据
        this.getDate();
    },
    methods: {
      //选择店铺
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      //删除店铺 与 封面
      remove(id){
        this.$confirm('确认删除?')
          .then(_ => {
            shop.delete(id)
              .then(response=>{
                    this.$message({
                      message: '删除成功',
                      type: 'success'
                    });
                  this.getDate();
            })
            return;
          })
      },
      //批量删除用户
      removes(){
        if(this.multipleSelection[0] == null){
            this.$message('请先选择要删除的用户');
            return;
        }
        this.$confirm('确认删除?')
          .then(_ => {
            var ids = this.multipleSelection.map(item => item.id);
            shop.deletes(ids)
              .then(response=>{
                  this.$message({
                    message: '删除成功',
                    type: 'success'
                  });
                  this.getDate();
              })
          })
      },   
      //记录数变动查询
      handleSizeChange(val) {
        this.getDate();
      },
      //页码变动查询
      handleCurrentChange(val) {
        this.getDate();
      },
      //分页查询
      getDate(){
          shop.pageShop(this.page)
              .then(response=>{
                this.page.total = response.data.total;
                this.list = response.data.list;
              })
      },
      //重置查询条件
      reset(){
        this.page.name='';
        this.page.createBegin=null;
        this.page.createEnd=null;
        this.page.owner='';
        this.page.userName='';
        this.getDate();
      },
      //模糊查询用户
      searchUsers(){
        selectUsersByName(this.page.userName)
            .then(response=>{
                this.userList = response.data.list;
            })
      },
      //设置所有者id
      setUserId(id,name){
        this.page.owner = id;
        this.page.userName = name;
        this.userList="";
      },
    }
}
</script>
<style>
.userContainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.header,
.content,
.footer {
  width: 80%;
  padding: 20px;
  align-content: center;
  text-align: center;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
.search{
    position: relative;
    bottom: 10px;
    margin-top: -20px;
    width: 200px;
    /* display: none; */
}
.searchText{
    display: block;
    width: 150px;
    height: 20px;
    border: none;
    border-bottom: 1px solid rgb(130, 195, 233);
    outline: none;
}
.searchText:hover{
    background-color: rgb(103, 173, 235);
    color: white;
}
</style>